<template>
  <div id="app">
    <!-- <Index msg="连云港特种设备安全集控平台"></Index> -->
    <!-- <transition name="fade"> -->
    <!-- <router-view></router-view> -->
    <!-- </transition> -->
    <dv-full-screen-container class="index">
      <!-- <div class="ball">
        <div class="ball1"><img src="http://139.196.105.243:8089/profile/mark/img/lbx.png" /></div>
        <div class="ball2"><img src="http://139.196.105.243:8089/profile/mark/img/jt.png" /></div>
        <div class="ball3"><img src="http://139.196.105.243:8089/profile/mark/img/map.png" /></div>
      </div> -->
      <div v-if="isNotFullscreen" class="test-full" @click="toggleFullscreen">
        <span>单击屏幕进入全屏</span>
      </div>
      <dv-border-box-8 :reverse="true" :dur="15" :color="['#010c41']">
        <keep-alive>
          <!-- 需要缓存的视图组件 -->
          <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <!-- 不需要缓存的视图组件 -->
        <router-view v-if="!$route.meta.keepAlive"></router-view>
      </dv-border-box-8>
    </dv-full-screen-container>
  </div>
</template>

<script>
// import Index from "./components/Index";
import $ from "jquery";

export default {
  name: "App",
  components: {
    // Index,
  },
  data() {
    return {
      isNotFullscreen: true,
    };
  },
  //监听属性 类似于data概念
  computed: {
    indexFlag() {
      return this.$store.state.indexFlag;
    },
  },
  //监控data中的数据变化
  watch: {
    indexFlag(newVal, oldVal) {
      console.log("newVal: " + newVal);
    },
  },
  mounted() {
    this.listenPage();
    // this.toggleFullscreen()
    window.addEventListener("keydown", this.getKeyDown);
    $("body").css("margin", 0);
    $("body").css("padding", 0);
    window.onresize = () => {
      console.log("切换了窗口大小：" + "width：" + $(document).width());
      this.isNotFull();
    };

    this.isNotFull();
  },
  methods: {
    isNotFull() {
      // is full ?
      if (document.fullscreenElement === null) {
        // console.log("进aaa");
        this.isNotFullscreen = true;
      } else {
        // _this.quitFullscreen();
        // console.log("进bbb");
        this.isNotFullscreen = false;
      }
    },
    listenPage() {
      var that = this;
      window.onbeforeunload = function (e) {
        console.log("刷新");
        that.$router.push("/");
        console.log(e);
      };
    },
    testFullScreen() {
      console.log("浏览器全屏测试");
    },

    //
    toggleFullscreen() {
      let _this = this;
      let el = document.documentElement;
      if (document.fullscreenElement === null) {
        console.log("进111");
        _this.openFullscreen(el);
        this.isNotFullscreen = false;
      } else {
        // _this.quitFullscreen();
        console.log("进222");
        this.isNotFullscreen = false;
      }
    },
    openFullscreen(element) {
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.msRequestFullscreen) {
        // IE11
        element.msRequestFullscreen();
      }
    },
    quitFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      }
    },
    getKeyDown(e) {
      let _this = this;
      if (event.keyCode === 122) {
        event.preventDefault() || (event.returnValue = false);
        _this.toggleFullscreen(); // 触发全屏的按钮
      } else if (event.keyCode === 27) {
        if (document.fullscreenElement !== null) {
          _this.quitFullScreen();
        }
      }
    },
  },
  created() {
    console.log("因为不确定的因素，代码比较粗糙，后期再优化！");
    if (this.$router.path !== "/") {
      // return console.log('不是首页');
      this.$router.push("/");
    }
  },
};
</script>

<style lang="less">
#app {
  // font-family: Avenir, Helvetica, Arial, sans-serif;
  font-family: "Microsoft YaHei";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  // color: #2c3e50;
  width: 100%;
  height: 100%;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
.index {
  width: 100%;
  height: 100%;
  background-color: @BgColor;
  background: @BgImage;
  background-size: cover;
  position: relative;
  cursor: pointer;
  .ball {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    .ball1,
    .ball2,
    .ball3 {
      position: absolute;
      opacity: 0.6;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .ball1 {
      animation: myfirst2 15s infinite linear;
    }
    .ball2 {
      opacity: 0.2;
      animation: myfirst 10s infinite linear;
    }
  }
  .test-full {
    position: absolute;
    // width: 100%;
    // height: 0.5rem;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    // left: 50%;
    // transform: translateX(-50%);
    // top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999999;
    line-height: 0.5rem;
    opacity: 1;
    transition: all 0.5s;
    span {
      font-size: 0.4rem;
      color: #eee;
    }
  }
  .test-full:hover {
    opacity: 1;
  }
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-active {
  opacity: 0;
}

// 动画
@keyframes myfirst2 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

@keyframes myfirst {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-359deg);
  }
}

// 返回和首页链接
.goback,
.goindex {
  position: absolute;
  top: 2%;
}
.goback {
  left: 0;
}
.goindex {
  right: 0;
}

// el 样式修改 ----------------------------------------------------------------------
/* 修改element ui */

/* 下拉 */
.el-dropdown-link.el-dropdown-selfdefine,
.el-dropdown-link.el-dropdown-selfdefine {
  font-size: 0.2rem !important;
}

.el-dropdown-menu__item {
  font-size: 0.2rem !important;
}

.el-dropdown-link {
  color: @FontColor!important;
  font-size: 0.2rem !important;
}
.el-dropdown-menu {
  background-color: rgba(2, 15, 71, 0.9) !important;
}
.el-dropdown-menu__item {
  color: @FontColor!important;
  font-size: 0.2rem !important;
}
.el-dropdown-menu__item:hover {
  background-color: rgba(2, 15, 71, 0.7) !important;
  color: @HoverColor!important;
}

/* 列表页搜索框放大镜 */
.el-input__icon.el-icon-search {
  font-size: 0.2rem;
}

// 搜索框1.5
.el-input {
  width: 100%;
  height: 100%;
}

.el-input input {
  width: 100%;
  height: 100%;
  background-color: rgba(6, 16, 88, 0.5) !important;
  width: 100%;
  height: 100%;
  color: @FontColor;
  font-size: 0.24rem;
}

/* 搜索框2.0 */
.el-autocomplete.inline-input {
  width: 100% !important;
  height: 100%;
}
.el-autocomplete.inline-input .el-input {
  width: 100%;
  height: 100%;
}
.el-autocomplete.inline-input .el-input .el-input__inner {
  background-color: rgba(6, 16, 88, 0.5) !important;
  width: 100%;
  height: 100%;
  color: @FontColor;
  font-size: 0.24rem;
}

// 小搜索框
.search-box-s .el-input input {
  font-size: 0.16rem !important;
}

/* 候选框 */
.el-autocomplete-suggestion.el-popper .el-scrollbar {
  // background-color: @BgColor !important;
  // border: 1px solid @BgColor;
  // color: #eee !important;
}
.el-autocomplete-suggestion.el-popper
  .el-scrollbar
  .el-autocomplete-suggestion__wrap.el-scrollbar__wrap
  ul
  li {
  color: #333 !important;
  font-size: 0.2rem;
}

// 候选框高亮
.el-autocomplete-suggestion.el-popper
  .el-scrollbar
  .el-autocomplete-suggestion__wrap.el-scrollbar__wrap
  ul
  li:hover {
  background-color: @Blue!important;
  color: #eee !important;
}

.el-scrollbar__view.el-autocomplete-suggestion__list .highlighted {
  background-color: #0f0 !important;
  color: #fff !important;
}

/* el 轮播图 */
.el-carousel__item h3 {
  color: #eee;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: rgba(0, 0, 0, 0.2);
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: rgba(0, 0, 0, 0.1);
}
.el-carousel.el-carousel--horizontal {
  width: 100%;
  height: 100%;
}
.el-carousel.el-carousel--horizontal .el-carousel__container {
  width: 100%;
  height: 100%;
}
.el-carousel__arrow.el-carousel__arrow--left,
.el-carousel__arrow.el-carousel__arrow--right {
  width: 0.5rem;
  height: 0.5rem;
  /* background-color: rgba(255,255,255,.3); */
  font-size: 0.24rem;
}

// el 复选框
.el-checkbox-group {
  .el-checkbox {
    font-size: 0.2rem;
    color: #eee;
    .el-checkbox__input {
    }
    .el-checkbox__label {
      font-size: 0.2rem !important;
      color: #333;
    }
  }
}

// el 单选框
.el-radio__label {
  font-size: 0.16rem!important;
  color: #fff!important;
}
// el 选中的单选框
.el-radio.is-checked {
  .el-radio__label {
    color: @Blue!important;
  }
}

// el 地图单选框
.map-select .el-radio__label {
  font-size: 0.16rem!important;
  color: #333!important;
  font-weight: 700;
}
// el 选中的地图单选框
.map-select .el-radio.is-checked {
  .el-radio__label {
    color: #fff!important;
  }
}

// 轮廓图悬浮框
.tooltip-map {
  font-size: 0.18rem;
  width: 2rem;
  height: 1.5rem;
  border: 1px solid @Blue;
  padding: 0 0.1rem;
  p {
    color: #eee;
    text-align: left;
    width: 100%;
    height: 30%;
    line-height: 0.5rem;
    // background-color: @Blue;
  }
  p:first-child {
    font-size: 0.2rem;
    font-weight: 700;
    color: @Blue;
  }
}

// 单选框
.el-radio-group {
  .el-radio {
    .el-radio__label {
      font-size: 0.18rem !important;
      color: @FontColor;
    }
  }
  .el-radio.all-kg {
    font-weight: 500 !important;
  }
}

// 键盘下键选中颜色
.el-scrollbar__view.el-autocomplete-suggestion__list .highlighted {
  background-color: @Blue!important;
}

// el分页样式
.el-pagination {
  font-size: 0.2rem !important;
  .el-pagination__total {
    color: #eee !important;
    font-size: 0.2rem !important;
  }
  button {
    color: #eee !important;
    font-size: 0.24rem !important;
    background-color: rgba(0, 0, 0, 0) !important;
    span {
      color: #eee !important;
      font-size: 0.2rem !important;
    }
  }
  .el-pager {
    color: #eee !important;
    font-size: 0.2rem !important;
    li {
      color: #eee !important;
      font-size: 0.2rem !important;
      background-color: rgba(0, 0, 0, 0) !important;
    }
    li.active {
      color: turquoise !important;
      font-size: 0.24rem !important;
    }
  }
}

// 通用datav loading
.e-loading {
  color: #fff;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.2);
  opacity: 0.9;
  z-index: 999999;
}

// 公告详情里的img
.notice .notice-info .info-box .info-content #notiveInfo img {
  display: block;
  width: 100% !important;
  margin: 0.15rem 0;
}
.kg-detail .notice-info .info-box .info-content #notiveInfo p {
  width: 100% !important;
  // background-color: #ccc;
  overflow: hidden;
}
.kg-detail .notice-info .info-box .info-content #notiveInfo p img {
  display: block;
  width: 100% !important;
  margin: 0.15rem 0;
}

// 知识库弹出框
.el-dialog__wrapper .el-dialog .el-dialog__body {
  box-sizing: border-box;
  padding: 0.1rem;
  margin: 0;
  width: 100%;
  height: 6rem;
  overflow: auto;
}
.el-dialog__wrapper.dji-dg .el-dialog .el-dialog__body {
  height: 8rem;
  padding: 0;
  padding-top: 0.13rem;
  // background-color: #ccc;
}
.el-dialog__wrapper.dji-dg .el-dialog .el-dialog__header {
  // display: none;
  padding: 0.2rem;
  height: 100%;
}
.el-dialog__wrapper.dji-dg .el-dialog {
  // background-color: rgba(0, 0, 0, 0.2);
  margin-top: 10vh!important;
  // background-color: #111870;
}

// 事件动态弹出框
.el-dialog__wrapper.dynamic-dialog .el-radio-group .el-radio .el-radio__label {
  color: #333!important;
}
.el-dialog__wrapper.dynamic-dialog .el-dialog__body {
  display: flex;
  flex-direction: column;
}
.el-dialog__wrapper.dynamic-dialog .el-dialog__body .dy-check {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-dialog__wrapper.dynamic-dialog .el-dialog__body .dy-text {
  flex: 3;
}
.el-dialog__wrapper.dynamic-dialog .el-dialog__body .dy-btn {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}


// datav 上下轮播 表头
.dv-scroll-board .header .header-item {
  font-size: 0.2rem !important;
}

// el 下拉 select
.check-command .check-box .check-li .check-input .el-select {
  width: 100%;
  height: 100%;
}
// el 下拉 候选框
.el-select-dropdown.el-popper
  .el-scrollbar
  .el-select-dropdown__wrap.el-scrollbar__wrap
  .el-scrollbar__view.el-select-dropdown__list
  .el-select-dropdown__item {
  font-size: 0.18rem;
}
.el-select-dropdown.el-popper
  .el-scrollbar
  .el-select-dropdown__wrap.el-scrollbar__wrap
  .el-scrollbar__view.el-select-dropdown__list
  .el-select-dropdown__item:hover {
  background-color: @Blue;
  color: #eee;
}

// 输入框 input
.check-command .check-box .check-li .check-input .input-box .el-input input {
  font-size: 0.2rem;
}

// 输入框 textarea
.check-command .check-box .check-li .check-input .input-box .el-textarea textarea {
  font-size: 0.2rem;
}

// el 应急表单
.check-command .check-box .check-li .check-input .input-box .el-input input {
  background-color: #fff !important;
  border: 1px solid #999;
  color: #666 !important;
}

// el 应急-按钮
.check-command .check-box .check-li .btn-box button {
  width: 1.5rem;
  height: 0.5rem;
  font-size: 0.16rem;
}

// el 滑动 slider
.el-slider__runway {
  background-color: #409eff!important;
}

// 百度地图 去logo
.anchorBL {
  display: none!important;
}

// vue-video-player 隐藏控制栏
.vjs-custom-skin > .video-js .vjs-control-bar {
  display: none;
}
</style>
